<template>
    <div class="my">
        <van-nav-bar title="个人中心" right-text="设置" @click-right="botShow" />

        <div class="bigbox">
            <div class="card">
                <div class="imgBx">
                    <img src="../../static/images/logo02.png" alt="" />
                </div>
                <div class="content">
                    <div class="details">
                        <h2>
                            {{ personObj.username }}<br /><span class="txt">{{ txt }}</span>
                        </h2>
                        <div class="data">
                            <h3>{{ num }}<br /><span @click="collect">收藏</span></h3>
                            <h3>{{ count }}<br /><span @click="browse">浏览</span></h3>
                            <h3>{{ man - 1 }}<br /><span @click="online">岛屿伙伴</span></h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
    </div>
</template>

<script>
export default {
    name: "my",
    data() {
        return {
            personObj: {},
            count: 0,
            num: 0,
            show: false,
            man: 0,
            txt: "天青色等烟雨",
            actions: [{ name: "退出登录" }, { name: "设置中心" }],
        };
    },
    beforeRouteEnter(to, from, next) {
        next((vm) => {
            console.log(vm);
            vm.token = localStorage.getItem("pass");
            console.log(vm.token);
            if (vm.token) {
                next();
            } else {
                alert("未登录,请先登录!");
                vm.$router.push("/login");
            }
        });
    },
    methods: {
        onSelect(item) {
            console.log(item.name);
            if (item.name == "退出登录") {
                if (confirm("是否退出登录?")) {
                    localStorage.removeItem("loginUser");
                    localStorage.removeItem("pass");
                    this.$toast("退出成功!");
                    this.$router.push("/");
                }
                this.show = false;
            } else {
                this.$router.push("/set");
            }
        },
        botShow() {
            this.show = !this.show;
        },
        collect() {
            this.$router.push("/bookshelf");
        },
        browse() {
            this.$router.push("/glance");
        },
        online() {
            this.$router.push("/person");
        },
        sendPerson() {
            let perData;
            if (localStorage.getItem("loginUser")) {
                perData = JSON.parse(localStorage.getItem("loginUser"));
                this.personObj = perData;

                if (localStorage.getItem("token")) {
                    let perNum = JSON.parse(localStorage.getItem("token"));
                    this.man = perNum.length;
                }

                if (localStorage.getItem("flat")) {
                    let scData = JSON.parse(localStorage.getItem("flat")).filter((item) => {
                        return item.flat == 1 && item["yyid"] == perData["username"];
                    });
                    this.num = scData.length;
                } else {
                    this.num = 0;
                }

                if (localStorage.getItem("record")) {
                    console.log(perData["username"]);
                    let llData = JSON.parse(localStorage.getItem("record")).filter((item) => {
                        return item["yyid"] == perData["username"];
                    });
                    this.count = llData.length;
                } else {
                    this.count = 0;
                }
            }
        },
    },

    created() {
        this.sendPerson();
        if (localStorage.getItem("loginUser")) {
            let tokenTxt = JSON.parse(localStorage.getItem("loginUser"))["txt"];
            if (tokenTxt != undefined) {
                this.txt = tokenTxt;
            }
        }
    },
};
</script>

<style lang="scss" scope>
@import url(../../static/style/reset.css);
@import "../../static/style/variable.scss";
.my {
    height: 100vh;
    background: $bgActiveColor;
}
.delLogin {
    margin-top: 1.3rem;
}
.bigbox {
    margin-top: 2.6667rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.van-nav-bar__text {
    color: #fdcbf1;
}
.van-popup {
    border-radius: 0.32rem 0.32rem 0 0;
}
// .personage {
//     padding-top: 0.2rem;
//     height: 13.3333rem;
//     margin: 0.2667rem;
//     color: #333;
//     .personTitle {
//         display: flex;
//         align-items: center;
//         height: 2rem;
//         font-size: 0.4267rem;
//         border-radius: 0.32rem;

//         .personImg {
//             height: 1.8667rem;
//             width: 1.8667rem;

//             img {
//                 border-radius: 50%;

//                 background-color: aliceblue;

//                 height: 2rem;
//                 width: 2rem;
//             }
//         }

//         .pName {
//             height: 1rem;
//             margin-left: 0.2667rem;
//             margin-top: 0.5333rem;
//             display: flex;
//             flex-direction: column;
//             justify-content: space-between;
//             span {
//                 font-size: 0.4267rem;
//             }
//             p {
//                 font-size: 12px;
//             }
//         }
//         padding-bottom: 0.35rem;
//     }
//     .pcon {
//         margin: 0.2667rem 0.2667rem 0;
//         height: 0.8rem;

//         background-color: rgb(254, 237, 249);
//         font-size: 0.4267rem;
//         display: flex;
//         padding: 0.2667rem 0;
//         justify-content: space-between;
//         align-items: center;
//         border-radius: 0.32rem;

//         h4 {
//             margin-left: 10px;
//         }
//         span {
//             font-size: 0.3733rem;
//             margin-right: 10px;
//         }
//     }
// }
.card {
    position: relative;
    width: 9.0667rem;
    height: 4.2667rem;
    background: #fff;
    border-radius: 0.5333rem;
    box-shadow: 0 0.1333rem 0.8rem rgba(0, 0, 0, 0.15);
    transition: 0.5s;
    &:hover {
        height: 7.8rem;
    }
    &:hover .imgBx {
        width: 5.3333rem;
        height: 5.3333rem;
    }
    .imgBx {
        position: absolute;
        width: 4rem;
        left: 50%;
        top: -1.3333rem;
        height: 4rem;
        transform: translateX(-50%);
        background: white;
        border-radius: 20px;
        box-shadow: 0 15px 50px rgba(131, 48, 120, 0.35);
        overflow: hidden;
        transition: 0.5s;
        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .content {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        overflow: hidden;
        justify-content: center;
        align-items: flex-end;
        .details {
            padding: 0.5333rem 1.0667rem;
            text-align: center;
            width: 100%;
            transition: 0.5s;
            transform: translateY(2.56rem);
            .data {
                display: flex;
                justify-content: space-between;
                margin: 0.5333rem 0;
                h3 {
                    font-size: 0.4267rem;
                    color: #555;
                    line-height: 0.5333rem;
                    font-weight: 600;
                    span {
                        font-size: 0.3733rem;
                        font-weight: 400;
                        opacity: 0.5;
                    }
                }
            }
            h2 {
                font-size: 0.5333rem;
                font-weight: 600;
                color: #555;
                line-height: 0.5333rem;
                span {
                    font-size: 0.32rem;
                    font-weight: 500;
                    opacity: 0.5;
                }
            }
        }
    }
}

.card:hover .content .details {
    transform: translateY(0.5333rem);
}
.txt {
    display: block;
    margin: 0 auto;
    width: 5.3333rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
</style>
